<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<jsp:include page="/WEB-INF/jsp/lib.jsp" />
<!-- 查询员工 -->
姓名：<input id="name" />&nbsp;
性别：男<input name="sex" type="radio" value="1"/>
性别：女<input name="sex" type="radio" value="0"/><br><br>
部门：<select id="deptId" >
		<option value="">--请选择--</option>
		</select>&nbsp;
职位：<select id="positionId" >
		<option value="">--请选择--</option>
		</select><br><br>
<!-- 1.只选择一个起始日期或者结束日期
	 2.两个都选择了起始日期小于结束日期 
	 	判断大小
	 3.两个都没有选择
 -->
生日:起始日期：<input id="begin" class="easyui-datebox" />&nbsp;结束日期：<input id="over" class="easyui-datebox" /><br><br>
入职:起始时间：<input id="start" class="easyui-datebox" />&nbsp;结束时间：<input id="end" class="easyui-datebox" />&nbsp;
<button id="btn">搜索</button><br><br>
<table id="dg"></table>
<!-- 对话框 -->
<div id="dlg">
	<form id="ff">
		<input type="hidden" name="id">
		姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：<input name="name"><br>
		性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：男<input name="sex" type="radio" value="1"/>
												    女<input name="sex" type="radio" value="0"/><br>
		部&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;门：<select id="deptIds" name="deptId">
													<option value="">--请选择--</option>
												</select><br>
		职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位：<select id="positionIds" name="positionId">
													<option value="">--请选择--</option>
												  </select><br>
		生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日：<input name="birthday" class="easyui-datebox"><br>
		入职时间：<input name="entry" class="easyui-datebox">
	</form>
</div>
<!-- js处理数据 -->
<script type="text/javascript">
	//处理时间日期
	function formatterDate(value){
		if(!value){
			return null;
		}
		var date = new Date(value);
		var year = date.getFullYear();
		var month = date.getMonth()+1;
		var date1 = date.getDate();
		var hours = date.getHours();
		var min = date.getMinutes();
		var sec = date.getSeconds();
		var d = year+"-"+month+"-"+date1+" "+hours+":"+min+":"+sec;
		return d;
	}
	//初始化表格
	$(function(){
		var url
		//初始化，查询后端的部门列表
		$.ajax({
			url:"dept/list.do?rows=50",
			success:function(data){
				$.each(data.rows,function(index,dept){
					$("#deptId").append("<option value="+dept.id+">"+dept.deptName+"</option>")
					$("#deptIds").append("<option value="+dept.id+">"+dept.deptName+"</option>")
				})
			}
		})
		//部门的下拉列表绑定change事件
		$("#deptId").change(function(){
			//重置下拉列表中原有的html代码
			$("#positionId").html("<option value=''>--请选择--</option>");
			//获取选中的部门id
			var deptId = $("#deptId").val();
			//根据部门id查询所有的职位
			$.ajax({
				url:"position/list.do?deptId="+deptId,
				success:function(data){
					//遍历rows职位数据
					$.each(data.rows,function(index,position){
						//追加
						$("#positionId").append("<option value="+position.id+">"+position.positionName+"</option>")
					})
				}
			})
		})
		
		//带参数刷新表格
		$("#btn").click(function(){
			var sex
			$("input[name=sex]").each(function(){
				if(this.checked){
					sex=this.value
				}
			})
			var begin = $("#begin").datebox("getValue")
			if(begin!=""&&begin){
				begin=begin+" 00:00:00"
			}
			var over = $("#over").datebox("getValue")
			if(over!=""&&over){
				over=over+" 00:00:00"
			}
			var start = $("#start").datebox("getValue")
			if(start!=""&&start){
				start=start+" 00:00:00"
			}
			var end = $("#end").datebox("getValue")
			if(end!=""&&end){
				end=end+" 00:00:00"
			}
			$("#dg").datagrid({
				queryParams:{
					name:$("#name").val(),
					sex:sex,
					positionId:$("#positionId").val(),
					begin:begin,
					over:over,
					start:start,
					end:end
				}
			});
		})
		
		$("#deptIds").change(function(){
			//重置下拉列表中原有的html代码
			$("#positionIds").html("<option value=''>--请选择--</option>");
			//获取选中的部门id
			var deptId = $("#deptIds").val();
			//根据部门id查询所有的职位
			$.ajax({
				url:"position/list.do?deptId="+deptId,
				success:function(data){
					//遍历rows职位数据
					$.each(data.rows,function(index,position){
						//追加
						$("#positionIds").append("<option value="+position.id+">"+position.positionName+"</option>")
					})
				}
			})
		})
		
		//初始化对话框
		$("#dlg").dialog({
			width:260,
			height:240,
			//默认对话框是关闭的
			closed:true,
			buttons:[{
				text:"保存",
				//图标样式
				iconCls:"icon-save",
				handler:function(){
					//获取表单参数
					var params = $("#ff").serialize();
					//提交表单
					$.ajax({
						url:url,
						data:params,
						//指定返回数据的格式
						dataType:"json",
						//data是响应的数据 data结构
						success:function(data){
							//保存成功
							$.messager.alert("提示","保存成功","info",function(){
								//关闭对话框
								$("#dlg").dialog("close");
								//刷新表格
								$("#dg").datagrid("reload")
							})
						}
					})
				}
			},{
				text:"取消",
				iconCls:"icon-cancel",
				handler:function(){
					//关闭对话框
					$("#dlg").dialog("close");
				}
			}]
		})
		
		//初始化表
		$("#dg").datagrid({
			//自适应列宽
			fitColumns:true,
			//加载数据
			url:"staff/list.do",
			//列表栏
			//field的值是json数据的key
			//title显示的列标题
			columns:[[
				{field:'id',title:'ID',width:100},
				{field:'name',title:'姓名',width:100},
				{field:'sex',title:'性别',width:100,
					formatter:function(value){
						if(value==1){
							return "男"
						}else{
							return "女"
						}
					}},
				{field:'birthday',title:'出生日期',width:100,
					formatter:function(value,row,index){
						return formatterDate(value);
					}},
				{field:'entry',title:'入职时间',width:100,
					formatter:function(value,row,index){
						return formatterDate(value);
					}},
				{field:'positionName',title:'职位',width:100},
				{field:'updateTime',title:'修改时间',width:100,
					formatter:function(value,row,index){
						return formatterDate(value);
					}},
				{field:'createTime',title:'创建时间',width:100,
					formatter:function(value,row,index){
						return formatterDate(value);
					}}
					]],
			//开启分页
			pagination:true,
			//开启单选
			singleSelect:true,
			//定义工具栏
			toolbar:[{
				text:"增加",
				iconCls:"icon-add",
				handler:function(){
					$("#ff").form("clear");
					//打开对话框
					$("#dlg").dialog("open");
					//修改对话框标题
					$("#dlg").dialog("setTitle","增加员工");
					url="staff/save.do";
				}
			},"-",{
				text:"修改",
				iconCls:"icon-edit",
				handler:function(){
					//获取选中的数据
					var row = $("#dg").datagrid("getSelected");
					if(row){
						$("#dlg").dialog("open");
						$("#dlg").dialog("setTitle","修改员工");
						//清除表单残留内容
						$("#ff").form("clear");
						//将选择的数据回显表单
						$("#ff").form("load",row);
						//处理id的回填数据
						$("input[name=id]").val(row.id);
						url="staff/update.do";
					}else{
						//没有选中数据就提示用户选择数据行
						$.messager.alert("提示","请先选中一行数据","info")
					}
				}
			},"-",{
				text:"删除",
				iconCls:"icon-remove",
				handler:function(){
					var row = $("#dg").datagrid("getSelected")
					if(row){
						$.messager.confirm('确认对话框', '您想删除【'+row.name+'】吗？',function(shi){
							if(shi){
								$.ajax({
									url:"staff/delete.do?id="+row.id,
									//data:{id:row.id},
									success:function(){
										$("#dg").datagrid("reload")
									}
								})
							}
						})
					}else{
						$.messager.alert("提示","请先选中一行数据","info")
					}
				}
			}]
		})
	})
</script>